<template>
  <div>
    <!-- 面包屑开始 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 面包屑结束 -->
    <!-- 卡片视图区域 -->
    <el-card>
      <el-row :gutter="20">
        <!-- 搜索模块开始 -->
        <!-- 搜索未完成 -->
        <el-col :span="8">
          <el-input
            placeholder="请输入内容"
            v-model="queryInfo.keyword"
            clearable
            @clear="getShopList"
          >
            <el-button
              type=""
              slot="append"
              icon="el-icon-search"
              @click="getShopList"
            ></el-button>
          </el-input>
        </el-col>
        <!-- 搜索模块结束 -->
        <!-- 添加模块开始 -->
        <el-col :span="4">
          <el-button type="primary" @click="showAddDialog()"
            >添加商品</el-button
          >
        </el-col>
        <!-- 添加模块结束 -->
      </el-row>
      <el-table :data="tableData" border stripe class="categories_list">
        <!-- label表示标注，prop表示数据字段名 -->
        <el-table-column type="index" label="#"></el-table-column>
        <el-table-column label="商品" prop="item"></el-table-column>
        <el-table-column label="价格" prop="price"></el-table-column>
        <el-table-column label="备注" prop="description"></el-table-column>
        <el-table-column label="操作" width="300px">
          <template slot-scope="scope">
            <!-- 修改按钮      -->
            <el-button
              type="primary"
              icon="el-icon-edit"
              size="mini"
              @click="showEditDialog(scope.row)"
            ></el-button>

            <!-- 删除按钮   -->
            <el-button
              type="danger"
              icon="el-icon-delete"
              size="mini"
              @click="removeUserById(scope.row.id)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-row>
        <!-- 分页开始 -->
        <el-pagination
          style="margin-left:700px"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryInfo.page"
          :page-sizes="[1, 2, 5, 10]"
          :page-size="100"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
        <!-- 分页结束 -->
      </el-row>
    </el-card>
    <!-- 卡片视图区域 -->
    <!-- 添加商品开始 -->
    <el-dialog
      title="添加商品"
      :visible.sync="showAddCategoriesPage"
      width="50%"
      :before-close="handleClose"
    >
      <div>
        <el-form
          :model="categoriesForm"
          :rules="categoriesRules"
          ref="categoriesForm"
          label-width="100px"
        >
          <el-form-item label="物品" prop="item">
            <el-input v-model="categoriesForm.item"></el-input>
          </el-form-item>
           <el-form-item label="价格" prop="price">
            <el-input v-model="categoriesForm.price"></el-input>
          </el-form-item>
           <el-form-item label="备注" prop="description">
            <el-input v-model="categoriesForm.description"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="saveNewCategories"
          >保存商品</el-button
        >
      </span>
    </el-dialog>
    <!-- 添加商品结束 -->
    <!-- 修改商品开始 -->
    <el-dialog
      title="编辑商品"
      :visible.sync="showEditCategoriesPage"
      width="50%"
      :before-close="handleClose"
    >
      <div>
        <el-form
          :model="categoriesForm"
          :rules="categoriesRules"
          ref="categoriesForm"
          label-width="100px"
        >
          <el-form-item label="物品" prop="item">
            <el-input v-model="categoriesForm.item"></el-input>
          </el-form-item>
           <el-form-item label="价格" prop="price">
            <el-input v-model="categoriesForm.price"></el-input>
          </el-form-item>
           <el-form-item label="备注" prop="description">
            <el-input v-model="categoriesForm.description"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="updateitem()">保存商品</el-button>
      </span>
    </el-dialog>
    <!-- 修改商品结束 -->
  </div>
</template>
<script>
export default {
  data() {
    return {
      //模拟商品table数据
      tableData: [
        { id: 1, item: "默认商品", price: 50, description: "", updateTime: "" },
        { id: 2, item: "大学笔记", price: 50, createTime: "", updateTime: "" },
        { id: 3, item: "开发笔记", price: 50, description: "", updateTime: "" },
        { id: 3, item: "语言学习", price: 50, description: "", updateTime: "" }
      ],
      //请求的查询数据
      queryInfo: {
        keyword: "",
        // 当前的页数
        page: 1,
        // 当前每页显示多少数据
        size: 5
      },
      // 添加商品窗口
      showAddCategoriesPage: false,
      showEditCategoriesPage: false,
      // 商品表单
      categoriesForm: {
        id:"",
        item: "",
        price:"",
        description:""
      },
      total:"",
      // 商品名字规则
      categoriesRules: {
        item: [
          { required: true, message: "请输入商品名称", trigger: "blur" },
          { min: 2, max: 10, message: "长度在 2 到 10 个字符", trigger: "blur" }
        ]
      }
    };
  },
  created() {
    this.getShopList();
  },
  methods: {
    //显示商品列表
    getShopList() {
      // //分页逻辑
      this.$http.post("http://localhost:1235/shop/queryAll",this.queryInfo ).then(res => {
        if(res.data.code==200){
            this.tableData=res.data.data;
            this.total=res.data.count;
        }else{
             this.$message('数据加载失败');
        }
      });
    },
    //显示添加商品弹窗
    showAddDialog() {
      this.showAddCategoriesPage = true;
    },
    //保存商品
    saveNewCategories() {
      // this.categoriesForm={};
      //保存逻辑
      this.showAddCategoriesPage = false;
      console.log(this.categoriesForm)
        this.$http.post("http://localhost:1235/shop/add",this.categoriesForm ).then(res => {
          
        if(res.data.code==200){
            this.getShopList();
               this.$message({
              type: 'success',
              message: `添加成功`
            });
        }else{
              this.$message({
              type: 'error',
              message: `添加失败`
            });
        }
        })
        this.categoriesForm={};
    },
    //显示修改弹窗
    showEditDialog(row) {
      // alert("要求改" + id);
      this.showEditCategoriesPage = true;
      //回显
        this.categoriesForm = row;
    },
    //更新商品
    updateitem(row) {
      //更新逻辑
      this.showEditCategoriesPage = false;
      // this.categoriesForm = {};
        console.log(this.categoriesForm);
           this.$http.post("http://localhost:1235/shop/update",this.categoriesForm ).then(res => {
        if(res.data.code==200){
            this.getShopList();
               this.$message({
              type: 'success',
              message: `添加成功`
            });
        }else{
              this.$message({
              type: 'error',
              message: `添加失败`
            });
        }
        })
         this.categoriesForm="";
    },
    //删除
    removeUserById(id) {
      // alert("要删除商品" + id);
      //删除逻辑
         this.$http.post("http://localhost:1235/shop/delete?id="+id).then(res => {
        if(res.data.code==200){
          this.getShopList();
             this.$message({
              type: 'success',
              message: `删除成功`
            });
        }else{
              this.$message({
              type: 'error',
              message: `删除失败`
            });
        }
        })
          
    },
    //取消
    handleClose() {
      this.showAddCategoriesPage = false;
      this.showEditCategoriesPage = false;
      this.categoriesForm = {};
    },
    // 分页
    // 监听 size 改变事件 每页显示的个数
    handleSizeChange(newSize) {
      // console.log(newSize)
      this.queryInfo.size = newSize;
      this.getShopList();
    },
    // 监听 页码值 改变的事件 当前页面值
    handleCurrentChange(newPage) {
      console.log(newPage);
      this.queryInfo.page = newPage;
      this.getShopList();
    }
  }
};
</script>
<style scoped>
.categories_list {
  margin-top: 10px;
}
</style>
